<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"
  [ <!ATTLIST a target CDATA #IMPLIED> ]
>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8"> 
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	
<title></title>

<!--
  templates/maker.html
  By Michael Geary - http://mg.to/
  See UNLICENSE or http://unlicense.org/ for public domain notice.
-->

<!--:: makerStyle ::-->

<style type="text/css">
    .popupOuter { z-index:1; position:absolute; background-color:white; display:none; }
    .popupInner { background-color:#E5ECF9; border:1px solid #3366CC; padding:8px; margin:4px; }
</style>

<!--:: makerScript ::-->
<script src="jquery.min.js" type="text/javascript"></script> 
<script src="scripts.js" type="text/javascript"></script>

<script type="text/javascript"> 
  (function() { 
    var fontFamily = '{{fontFamily}}', fontSize = '{{fontSize}}', fontUnits = '{{fontUnits}}'; 
    function e( id ) { return document.getElementById('Poll411'+id); } 
    var label = e('Label'), input = e('Input'), button = e('Button'), frame = e('Frame'); 
    var example = "{{example}}"; 
    input.value = example; 
    
    Poll411 = { 
      
      focus: function() { 
        if( input.value == example ) { 
          input.className = ''; 
          input.value = ''; 
        } 
      }, 
      
      blur: function() { 
        if( input.value ==  ''  ||  input.value == example ) { 
          input.className = 'example'; 
          input.value = example; 
        } 
      }, 
      
      select: function() { 
      }, 
      
      submit: function() { 
        var addr = input.value; 
        if( addr == example ) addr = addr.replace( /^.*: /, '' ); 
        frame.style.display = 'block'; 
        frame.innerHTML = [ 
          '<iframe ', 
            'src="http://www.gmodules.com/ig/ifr?url={{gadgetUrl}}&amp;synd=open&amp;up_gadgetType=iframe&amp;up_address=', encodeURIComponent(addr), '&amp;up_fontFamily=', encodeURIComponent(fontFamily), '&amp;up_fontSize=', fontSize, '&amp;up_fontUnits=', fontUnits, '&amp;up_submit=1" ', 
            'style="width:100%; height:100%;" ', 
            'frameborder="0" ', 
            'scrolling="no" ', 
          '/>' 
        ].join(''); 
        return false; 
      } 
    }; 
  })(); 
</script> 

<!-- End Google Election Center gadget -->

<!--:: ignore ::-->

</head>
<body>
<div>

<!--:: makerOverlays ::-->

<div id="getcode" class="popupOuter">
    <div class="popupInner" style="width:225px;">
        <div style="text-align:center; margin-bottom:10px;">
            <button type="button" id="btnGetCode" style="font-size:24px;">
                Get the Code
            </button>
        </div>
        <div style="font-size:14px;">
            <div style="margin-bottom:8px;">
                Click this button for an <strong>inline</strong> gadget using HTML and JavaScript. 
            </div>
            <div style="margin-bottom:8px;">
                The inline gadget initially displays only the search input form, without taking extra space on your page. When you click the <strong>Search</strong> button, the gadget expands to its full height.
            </div>
            <div style="margin-bottom:8px;">
                Not all websites support the inline gadget. 
                For a simpler gadget, change the <strong>Gadget Type</strong> below to Standard Gadget.
            </div>
        </div>
    </div>
</div>
<div id="havecode" class="popupOuter" style="width:95%; height:90%;">
    <div class="popupInner">
        <div>
            <div style="font-size:16px; margin-bottom:6px;">
                <strong>Copy and paste this HTML to include the gadget on your website.</strong><br>
            </div>
            <div style="font-size:15px; margin-bottom:8px;">
                Or click <strong>Get the Code</strong> below for a simpler fixed-height <strong><code>&lt;iframe&gt;</code></strong> gadget.
            </div>
            <div style="font-size:12px;">
                <form id="codeform" name="codeform" style="margin:0; padding:0;" action="">
                    <div>
                        <textarea id="codearea" name="codearea" style="width:100%; height:80%; font-family: Consolas,Courier New,Courier,monospace;" rows="1" cols="1">
                        </textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--:: ignore ::-->

</div>
</body>
</html>
